<script>
import {loadAdminChoose} from "@/api/admin/chooose.js";

export default {
  data(){
    return {
      totle: 0,
      params: {
        pageNo:1,
        pageSize:10,
        courseName:'',
        major:'',
        className:'',
      },
      list: [],
    }
  },
  methods: {
    async initChooseData(){
      let data = await loadAdminChoose(this.params)
      this.totle = data.total;
      this.list = data.list;
    },
  },
  created() {
    this.initChooseData()
  }
}
</script>
<template>
    <el-card>
        <template #header>选课信息管理</template>
        <div class="nav-bar">
            <div class="search">
                <el-input size="small" placeholder="专业名" clearable v-model="params.major"></el-input>
                <el-input size="small" placeholder="班级名" clearable v-model="params.className"></el-input>
                <el-input size="small" placeholder="课程名" clearable v-model="params.courseName"></el-input>
                <el-button size="small" type="primary" @click="initChooseData()">
                    <template #icon>
                        <el-icon><EpSearch /></el-icon>
                    </template>
                    <span>查询</span>
                </el-button>
            </div>
            <div>
                <el-button size="small" type="success">
                    <template #icon>
                        <el-icon><EpPlus /></el-icon>
                    </template>
                    <span>添加</span>
                </el-button>
            </div>
        </div>
        <el-table border stripe size="small" :data="list">
            <template #empty>
                <el-empty description="暂无数据" />
            </template>
            <el-table-column label="序号" type="index" width="60"></el-table-column>
            <el-table-column label="课程名称" prop="course_name"></el-table-column>
            <el-table-column label="学生名称" prop="student_name"></el-table-column>
            <el-table-column label="学生班级" prop="class_name"></el-table-column>
            <el-table-column label="日常分" width="100" #default="{row}">
              <el-tag v-if="row.sc_daily_score<60" type="danger" size="small" effect="dark">{{row.sc_daily_score}}</el-tag>
              <el-tag v-if="row.sc_daily_score<=80 && row.sc_daily_score>=60" type="warning" size="small" effect="dark">{{row.sc_daily_score}}</el-tag>
              <el-tag v-if="row.sc_daily_score>80" type="success" size="small" effect="dark">{{row.sc_daily_score}}</el-tag>
            </el-table-column>
            <el-table-column label="期末分" width="100" #default="{row}">
              <el-tag v-if="row.sc_exam_score<60" type="danger" size="small" effect="dark">{{row.sc_exam_score}}</el-tag>
              <el-tag v-if="row.sc_exam_score<=80 && row.sc_exam_score>=60" type="warning" size="small" effect="dark">{{row.sc_exam_score}}</el-tag>
              <el-tag v-if="row.sc_exam_score>80" type="success" size="small" effect="dark">{{row.sc_exam_score}}</el-tag>
            </el-table-column>
            <el-table-column label="总分" width="100" #default="{row}">
              <el-tag v-if="row.sc_score<60" type="danger" size="small" effect="dark">{{row.sc_score}}</el-tag>
              <el-tag v-if="row.sc_score<=80 && row.sc_score>=60" type="warning" size="small" effect="dark">{{row.sc_score}}</el-tag>
              <el-tag v-if="row.sc_score>80" type="success" size="small" effect="dark">{{row.sc_score}}</el-tag>
            </el-table-column>
        </el-table>
        <el-pagination size="small" background
            layout="total, sizes, prev, pager, next, jumper"
            :page-sizes="[5,10,20,30,40,50]"
            :total="totle"
            v-model:page-size="params.pageSize"
            v-model:current-page="params.pageNo"
            @change="initChooseData()"
        />
    </el-card>

</template>

<style scoped>
.nav-bar{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    margin-bottom: 14px;
}
.nav-bar .el-input{
    width: 180px;
    margin-right: 10px;
}
.el-pagination{
    margin-top: 14px;
    justify-content: center;
}
</style>
